<template>
  <div>
    <form action="/">
      <van-search placeholder="" v-model="sval" show-action @search="onSearch" @cancel="onCancel" style="position:fixed;top:0vh;left:0vw;width:100vw;z-index:1; border-radius: 8px; border: 1px solid #ccc; padding: 8px;" />
    </form>
    <div class="container">
      <div class="list-container">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list style="" v-model="loading" :finished="finished" finished-text="已加载全部数据" @load="onLoad">
            <van-checkbox-group v-model="selecteddata" ref="checkboxGroup">
              <van-cell v-for="(item, index) in list" :key="item.id" :value="item.value" @click="toggle(index)" style="padding: 15px 10px; border-bottom: 1px solid #eee;">
                <van-checkbox :name="item" ref="checkboxes" slot="right-icon" />
                <template #title>
                  <span style="font-size: 16px; color: #333;">{{ item.title }}</span><br>
                  <span style="font-size: 12px;color: #999;" v-html="item.label"></span>
                </template>
              </van-cell>
            </van-checkbox-group>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
    <!--    <div class="add-image">-->
    <!--      <img :src="require('@/assets/add.png')" @click="openNew" />-->
    <!--    </div>-->

    <van-tabbar>
      <van-tabbar-item @click="reBack()">确定</van-tabbar-item>
    </van-tabbar>
  </div>

</template>

<script>
import Vue from 'vue'
import { Search, List, Cell, PullRefresh, Toast, Tabbar, TabbarItem, Popup, CheckboxGroup, Checkbox, Button } from 'vant'
import qs from 'qs'
Vue.use(Search).use(List).use(Cell).use(PullRefresh).use(Toast).use(Tabbar).use(TabbarItem).use(Popup).use(CheckboxGroup).use(Checkbox).use(Button)
export default {
  name: 'refmulti',
  data () {
    return {
      sval: this.$route.params.conditionVal,
      list: [],
      loading: false,
      finished: false,
      isLoading: false,
      startline: 1,
      selecteddata: []
    }
  },
  methods: {
    onLoad () {
      let data = {
        'ref_object': this.$route.params.bo,
        'ref_toobject': this.$route.params.tobo,
        'ref_tofieldas': this.$route.params.field,
        'ref_inview': this.$route.params.conditionValHidden,
        'view_page': this.startline,
        'view_id': this.$route.params.viewid
      }
      //console.log('data', data)
      //console.log(this.sval)
      data.ref_inview = data && data.ref_inview.replace(':in:', ':in:' + this.sval)
      //console.log(data.ref_invew)
      this.axios({
        method: 'post',
        url: '/api/ref.listnew.do',
        data: qs.stringify(data)
      }).then(res => {
        //console.log('ref multi:', res)
        if (res.data.flag === '1') {
          Toast(res.data.des)
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
        } else {
          let rsdata = res.data.jsondata.outdata
          for (let i = 0; i < rsdata.length; i++) {
            this.list.push(rsdata[i])
          }
          if (rsdata == null || rsdata.length === 0) {
            this.loading = false
            this.finished = true
          } else {
            this.startline = this.startline + 1
            this.loading = false
          }
        }
      }).catch(res => {
        this.reserror(res)
      })
    },
    onRefresh () {
      this.list = []
      this.startline = 1
      this.isLoading = false
      this.loading = true
      this.finished = false
      this.onLoad()
    },
    openNew () {
      this.$router.push({ name: 'new', query: { idobject: this.$route.params.bo, newflag: 'refnew', reBackflag: this.rebackobject } })
    },
    onSearch () {
      this.list = []
      this.startline = 1
      this.onLoad()
    },
    onCancel () {
      this.sval = ''
      this.$router.go(-1)
    },
    toggle (index) {
      this.$refs.checkboxes[index].toggle()
    },
    reBack () {
      let refid = ''
      let refval = ''
      //console.log('selecteddata', this.selecteddata)
      // blfx单独处理
      if (this.$route.params.tobo == 'bflxmx') {
        let refArr = this.selecteddata
        //console.log('refArr', refArr)
        let payload = { ref_arr: refArr }
        this.$store.commit('refReBack', payload)
        this.$router.go(-1)
        return
      }

      for (let i = 0; i < this.selecteddata.length; i++) {
        refid += this.selecteddata[i].id + ';'
        refval += this.selecteddata[i][this.$route.params.fieldref] + ';'
      }
      // 回写
      // this.$toast(item.id + '-->' + item.title)
      let payload = { ref_id: refid, ref_show: refval, ref_field: this.$route.params.field, ref_item: this.selecteddata[0] }
      //console.log('payload', payload)
      this.$store.commit('refReBack', payload)
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.fieldgroup_title {
  text-align: left;
  margin: 0px;
  padding: 35px 15px 15px;
  color: rgba(69, 90, 100, 0.6);
  font-weight: normal;
  font-size: 14px;
}

.container {
  padding: 20px;
  /* 增加内边距 */
}

.list-container {
  max-height: calc(100vh - 150px);
  /* 控制最大高度，避免溢出 */
  overflow-y: auto;
  /* 允许滚动 */
  margin-top: 20px;
  /* 给顶部留空间 */
  padding: 10px;
}

button.floating-button {
  background-color: #007bff;
  /* 使用亮眼的蓝色 */
  color: white;
  font-size: 18px;
  padding: 10px 20px;
  /* 增加内边距 */
  border-radius: 10px;
  /* 圆角 */
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

form {
  margin: 20px 0;
  /* 添加上下边距 */
}

van-search {
  border-radius: 8px;
  /* 添加圆角 */
  border: 1px solid #ccc;
  /* 增加边框 */
  padding: 8px;
  /* 添加内边距 */
}

.van-tabbar {
  display: flex;
  justify-content: center;
  padding-bottom: 15px !important;
}

.van-tabbar .van-tabbar-item {
  color: white;
  background-color: #5790df !important;
  width: 80% !important;
  flex: 0 0 80% !important;
  font-size: 14px;
}

.van-cell .van-cell__title {
  flex: 2 !important;
}

.van-cell .van-cell__value {
  flex: 1 !important;
}

.add-image {
  position: fixed;
  /* 固定位置 */
  right: 5px;
  /* 距离右边的距离 */
  bottom: 80px;
  /* 距离底部的距离 */
  z-index: 1000;
  /* 确保在页面上显示 */
}

.add-image img {
  width: 75px;
  /* 图片的宽度 */
  height: auto;
  /* 高度自动调整 */
  border-radius: 50%;
  /* 可选：将图片设置为圆形 */
}
</style>
